神级开源“无头”组件库：已收获7万多star、在国外爆火，前端开发者一定要试试

↓ 点击下方卡片关注「OSC开源社区」

老牌的组件库

相信 组件库 这东西大家都不陌生吧？ 组件库 其实就是大佬们提前封装好的一些组件的集合体，我们在项目中可以直接拿来使用，无论是 Element-UI 还是 Ant-Design，想使用无非就是分几步：

• NPM安装
• 页面引入
• 使用组件

这也是我们现在大部分项目都在使用组件库的方式，但是说实话，大家真的苦这种方式久矣

苦组件库久矣？

为什么说苦组件库久矣呢？当我们将Element-UI、Ant-Design这类组件库后，他们的代码会在 node_modules中

但是大家都懂，组件库的功能或者样式不一定符合我们项目业务的要求，但是我们又不能直接修改node_modules中的源码，那咋办呢？

其实主要就是两点：

• 组件库的功能不符合业务需要咋办？
• 组件库的样式不符合UI设计稿咋办？

其实还是有办法的：

• 样式不满意，我们可以在页面中去使用样式覆盖
• 功能不满意，我们可以给组件库提issue，然后等待作者去增加；或者可以通过一些类似pacth-package这种工具去给node_modules中的源码打补丁，从而达到修改源码的效果

但是始终不是我想要的~我以前就有一个想法~

为啥不直接把源码复制到项目中？

我以前就有一个想法，我们使用一个组件库或者库的时候，为啥不直接把他们的源码复制到项目中呢？

就拿组件库来说吧，比如我项目只需要使用Buttom、Input、Select这些组件，那我可以直接从组件库中把这些组件的源码复制到项目来，那我既可以使用这些组件，我又可以随便改这些组件的源码样式，从而达到我想要的效果

可惜，理想很美好，现实很骨感~因为这些组件库里的代码互相引用关系很复杂，所以你不可能很轻松把你想要的个别组件源码复制到项目来，所以基本没人这么做~

既然自己复制不了，那有没有组件库能提供这样的命令呢，比如运行一个ui add Button就可以把组件库的Button组件源码复制到项目中呢？

还真有，无头组件库（Headless Component Libraries） 横空出世，它是一种新兴的前端开发模式，其核心在于将组件的逻辑和样式分离。

这种开发模式允许开发者在保持组件功能性的同时，完全控制组件的外观和风格，而不受特定UI框架的限制，优点有：

• 高度的灵活性和可定制性
• 轻量级和性能优化
• 提高开发效率
• 高度的可组合性

总结为一句话就是：无头组件库为你提供组件的基本架子，你可以随心所欲修改架子，修改样式，修改逻辑，已达到你的要求

Shadcn-UI

一个神级的无头组件库，无头组件库中的第一把交椅！！！

它就是 Shadcn-UI！！！在去年的最受欢迎的 JavaScript 库中，Shadcn-UI 夺下第一名，稳压Element-UI、Ant-Deisgn等一众老牌组件库

截止目前，github 上已经有 67k stars

Shadcn-UI 使用了 tailwindcss来当做预设CSS，所以当你自定义样式时会非常方便

目前React、Vue 版本都有

React 版本文档：https://ui.shadcn.com

Vue版本文档：https://www.shadcn-vue.com/

想要使用 Shadcn-UI 你得先初始化一些配置，比如 tailwindcss

接着你只需要使用命令

npx shadcn-ui@latest init

比如你想使用 Button 组件，你可以使用命令行

npx shadcn-ui@latest add button

这样它就会把Button 这个组件放到你的项目中去

使用的话可以直接引入使用，你如果对他预设的 CSS 和 功能不满意，你也可以直接去到 button.tsx 中去修改

END